<template>
  <view>
    <uni-card @click="popupShow = true">
      <template v-slot:title>
        <view class="icons-text card-title">
          <text class="icons">
            <u-icon name="hourglass" color="#1296db" size="18"></u-icon>
          </text>
          <text class="text">跟进任务</text>
        </view>
      </template>
      <view class="card-body">
        <text>{{ item?.abstractText }}</text>
        <view class="icons-text">
          <text class="icons">
            <image mode="aspectFill" class="image" src="@/static/icons/todo.png"></image>
          </text>
          <text class="text">{{ item?.targetObject?.followTime }}</text>
        </view>
        <view
          class="icons-text"
          v-for="(cus, i) in item?.targetObject?.followTaskTargetVoList"
          :key="i"
        >
          <text class="icons">
            <image
              mode="aspectFill"
              class="image"
              :src="
                cus?.targetObject?.avatarUrl
                  ? cus?.targetObject?.avatarUrl
                  : '/static/icons/avatar.png'
              "
            ></image>
          </text>
          <text class="text">{{ cus?.targetObject?.name }}</text>
        </view>
      </view>
    </uni-card>
    <u-popup :show="popupShow" :round="10" @close="popupShow = false">
      <view style="max-height: 60vh; overflow: auto; margin-top: 20rpx">
        <view class="list">
          <uni-list>
            <uni-list :border="true">
              <uni-list-chat
                v-for="(cus, index) in item?.targetObject?.followTaskTargetVoList"
                :key="index"
                :title="cus?.targetObject?.name"
                :avatar="
                  cus?.targetObject?.avatarUrl
                    ? cus?.targetObject?.avatarUrl
                    : '/static/icons/avatar.png'
                "
                :note="item?.abstractText"
                badge-positon="left"
              >
                <view class="chat-custom-right">
                  <view @click="clickUserProfile(cus)" style="margin-top: 14rpx">
                    <image
                      style="width: 50rpx"
                      class="slot-image"
                      :src="
                        cus?.targetObject?.type === '1'
                          ? '/static/icons/WeChat.png'
                          : '/static/icons/wecom.png'
                      "
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
              </uni-list-chat>
            </uni-list>
          </uni-list>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as ww from '@wecom/jssdk'
import { createJsapiSignatureAPI } from '@/services/common'
import { OpenUserProfileType } from '@wecom/jssdk'
import { registerApi } from '@/utils/wecom'
import { onShow } from '@dcloudio/uni-app'

const props = defineProps({
  item: {
    type: Object as any,
    default: () => {},
  },
})
const popupShow = ref<boolean>(false)

const clickUserProfile = async (row: any) => {
  await ww.openUserProfile({
    type: OpenUserProfileType.external,
    userid: row?.targetObject?.qwExternalUserid,
  })
}

onShow(async () => {
  await registerApi(['openUserProfile'])
})
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
  height: 100%;
}
.icons-text {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-top: 10rpx;
  color: #666;

  .icons {
    color: #3775cb;
    padding: 6rpx 5rpx 7rpx 0;
    .image {
      width: 26rpx;
      height: 26rpx;
    }
  }
}
.card-title {
  font-size: 28rpx;
}
.card-body {
  padding-left: 18rpx;
}
</style>
